<template>
  <div>
    <button @click="up">上一张</button>
    <button @click="next">下一张</button>
    <button @click="auto">自动播放</button>
    <button @click="stop">暂停播放</button>
    <div id="imgDiv" ><img :src="img" :width="width" @mouseover="over" @mouseout="auto"></div>

  </div>
</template>

<script>
import t1 from  "../assets/366-210425150221.png";
import t2 from  "../assets/1610072087c581pN5y9oWPmxgxv.jpg";
import t3 from  "../assets/1636509836_725682.jpg";
import t4 from  "../assets/1640141131706036.jpg";
import t5 from  "../assets/b7fd5266d0160924ab180148fb4822fae6cd7b899e1b.jpg";

var timer;
export default {
  name: "LunBo",
  data(){
    return{
      img:t1,
      images:[t1,t2,t3,t4,t5],
      width:"500px",
      index:0
    }
  },
  methods:{
    next(){
      this.index++;
      if (this.index>=this.images.length) {
        this.index=0;
      }
      this.img=this.images[this.index];
    },
    up(){
      this.index--;
      if (this.index < 0) {
        this.index=this.images.length-1;
      }
      this.img=this.images[this.index];
    },
    auto(){
      timer=setInterval(this.next,1000);
    },
    over(){
      clearInterval(timer);
    },
    stop(){
      clearInterval(timer);
    }

  },
  mounted() {
    this.auto();
  }
}
</script>

<style scoped>
#imgDiv{
  height: 720px;
  /*border: 1px solid red;*/
}
</style>
